<template>
  <div>
      <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="70%"
        append-to-body>
        <el-col :span="24">
            <el-col :xs="24" :sm="24" :md="5">
                <el-tree ref="tree" :data="treeData" :props="defaultProps" :filter-node-method="filterNode"  class="filter-tree" node-key="id" highlight-current :default-expanded-keys="[1]" accordion @node-click="getNodeData">
        <span class="custom-tree-node" slot-scope="{ node, data }">
            <el-tooltip class="item" effect="dark" content="无数据权限" placement="right-start" v-if="data.isLock">
            <span>{{ node.label }}<i class="el-icon-lock"></i></span>
        </el-tooltip>
        <span v-if="!data.isLock">{{ node.label }}</span>
        </span>
        </el-tree>
            </el-col>
            <el-col :xs="24" :sm="24" :md="8">
            <div class="boxsty">
              <!-- <div class="flex titbottom" >
                <el-input v-model="listQuery.name" placeholder="请输入搜索用户" style="margin-right:10px"></el-input>

                <el-button @click="btnSearch" type="primary" icon="el-icon-search" plain>搜索</el-button>

              </div> -->
              <div class="avue-crud">
              <el-table  @row-click="handleClick" :data="tableDataDept" v-loading="tableloading" style="width: 100%">
                <!-- <el-table-column fixed prop="userId" label="Id" width="80">-->
                <!--/el-table-column>-->
                <el-table-column prop="username" label="用户" width="120">
                </el-table-column>
                <el-table-column prop="ryName" label="姓名" min-width="150">
                </el-table-column>
                <!-- <el-table-column v-if="lastPage=='htcj'" prop="ryZjmc" label="职级" min-width="100">
                </el-table-column> -->
                <!--               <el-table-column fixed="right" label="操作" width="100">-->
                <!--                <template slot-scope="scope">-->
                <!--                  <el-button @click="handleClick(scope.row)" type="text" size="small">添加</el-button>-->
                <!--                </template>-->
                <!--               </el-table-column>-->
              </el-table>
              </div>
              <div style="margin-top:20px;">
                <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="page.currentPage" :page-sizes="[10, 20, 50, 100]" :page-size="page.pageSize" :total="page.total" background layout="total, sizes, prev, pager, next">
                 
                </el-pagination>
              </div>
            </div>
          </el-col>
          <el-col :xs="24" :sm="24" :md="11">
              <div class="boxsty">
              <!--             原来是叫【已选择机构】在合同创建受约人的地方不对，所以改成【已选择人员】-->
              <div class="tabletext titbottom">已选择人员
                <el-button class="pull-right" plain type="primary" @click="tableDataUser=[]">清空</el-button>
              </div>
              <div class="avue-crud">
              <el-table :data="tableDataUser" ref="ry-table" stripe>
                <el-table-column prop="ryName" label="姓名" min-width="100">
                </el-table-column>
                <!-- <el-table-column prop="deptName" label="部门" min-width="220"></el-table-column>
                <el-table-column fixed="right" label="操作" width="100">
                  <template slot-scope="scope">
                    <el-button @click="delUserList(scope.$index)" type="danger" plain>删除</el-button>
                  </template>
                </el-table-column> -->
              </el-table>
              </div>
            </div>
          </el-col>
        </el-col>
        
        <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submit">确 定</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>
import { allTreeTwo } from "@/api/jiangjin/jiangjinfpjjfpdjb";
import { fetchList,allDeptsUsers,pageChile,pageAll } from '@/api/admin/user'

export default {
    data(){
        return{
            dialogVisible:false,
            listQuery: {
                name: ''
            },
            treeData: [],
            jgtreeData: [],
            defaultProps: {
                children: 'children',
                label: 'name'
            },
            page: {
                total: 0, // 总页数
                currentPage: 1, // 当前页数
                pageSize: 20, // 每页显示多少条,
                isAsc: false // 是否倒序
            },
            tableDataDept:[],
            tableloading:false,
            tableDataUser:[]
        }
    },
    methods:{
        init(){
            this.dialogVisible=true
            this.getList()
            this.tableDataUser=[]
            
        },
        submit(){
            var lingdaoAllTreeChild={
                userId:this.tableDataUser[0].userId,
                username:this.tableDataUser[0].ryName
            }
            this.$emit("lingdaoAllTreeChild",lingdaoAllTreeChild)
            this.dialogVisible=false
        },
        getList(){
            allTreeTwo().then(res=>{
                if(res.data.data){
              
                this.treeData = res.data.data
                this.$nextTick(()=>{
                 this.$refs.tree.filter('人力资源部（党委组织部）')
                    })
                
            }
            })
        },
        filterNode(value, data) {
        if (!value) return true
         return data.name.indexOf(value) !== -1
        },
        getNodeData(data) {
        this.page.currentPage = 1
      var params={
          deptId: data.id
        }
     this.getPersons(this.page,params );

    },
    handleClick(vm){
        this.tableDataUser=[]
        var params={
            username:vm.username,
            userId:vm.userId,
            ryName:vm.ryName
        }
        this.tableDataUser.push(params)
       
    },
        getPersons(page, params) {
      this.tableloading = true;
      fetchList(Object.assign({current: page.currentPage,size: page.pageSize}, params, this.searchForm, this.zdySearchForm)).then(response => {
        // this.list = response.data.data.records
        var arr=response.data.data.records;
        this.tableDataDept = arr.map(item=>{
          if(item.ryZjmc){
            item.postCheckName=item.ryZjmc;
          }else{
            item.postCheckName='[无职级]'
          }
          return item;
        })
        this.page.total = response.data.data.total
        this.tableloading = false;
        // if(this.lastPage=='htcj'){
        //   this.postList=[];
        //   this.tableDataDept.forEach(item=>{
        //     var obj=this.postList.find(post=>post.postCheckName==item.postCheckName);
        //     if(!obj){
        //       var filterData=this.tableDataDept.filter(obj=>obj.postCheckName==item.postCheckName);
        //       this.postList.push(Object.assign(item,{postCheckNameNum:filterData.length}))
        //     }
        //   })
        //   this.handleFillInData();
        // }
        // //给机关下的人力资源部排序
        // if(this.qjDeptId==5){
        //       function sortData(obj1,obj2){
        //       return obj1.userId-obj2.userId
        //   }
        //   this.tableDataDept=this.tableDataDept.sort(sortData);
        // }

        ////console.log(this.tableDataDept);
      }).catch(err => {
        this.tableloading = false;
      })
    },
    // 每页数
    sizeChangeHandle(val) {
      this.page.pageSize = val
      this.page.currentPage = 1;
      this.getPersons(this.page );

    },
    // 当前页
    currentChangeHandle(val) {
      this.page.currentPage = val
      this.getPersons(this.page );
    },
    },
    
}
</script>

<style>

</style>